<template>
    <div v-loading="loading">
        <#-- 搜索区域 -->
        <el-row>
            <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
                <#list table.fields as field >
                <#--这些字段不搜索-->
                    <#if ((!field.comment?contains("!") && !field.comment?contains("！")) && field.propertyName != "id" && field.propertyName != "createTime" && field.propertyName != "updateTime") && field.name != 'delete_flag'>
                    <#--时间格式暂时不搜索-->
                        <#if field.type == 'datetime'>
                <el-form-item label="${field.comment?split("#")[0]}" prop="${field.propertyName}">
                    <el-date-picker type="datetime" v-model.trim="searchForm.${field.propertyName}"
                                    placeholder="${field.comment?split("#")[0]}">
                    </el-date-picker>
                </el-form-item>
                        <#else>
                            <#if field.customMap.statusFlag>
                <el-form-item label="${field.customMap.tableCommentModel.label}"
                              prop="${field.propertyName}">
                    <el-select v-model="searchForm.${field.propertyName}"
                               placeholder="${field.customMap.tableCommentModel.label}">
                        <el-option label="全部" value=""></el-option>
                        <#list field.customMap.tableCommentModel.params?keys as key>
                            <el-option label="${field.customMap.tableCommentModel.params[key]}"
                                       value="${key}"></el-option>
                        </#list>
                    </el-select>
                </el-form-item>
                            <#elseif field.customMap.relationFlag>
                <el-form-item label="${field.customMap.relationCommentModel.showInfo}" prop="${field.propertyName}">
                    <el-select v-model="searchForm.${field.propertyName}" filterable placeholder="请选择" @focus="init${field.customMap.relationCommentModel.aliasVar?cap_first}">
                        <el-option label="全部" value=""></el-option>
                        <el-option
                                v-for="item in ${field.customMap.relationCommentModel.aliasVar}Options"
                                :key="item.${field.customMap.relationCommentModel.tablePrimary}"
                                :label="item.${field.customMap.relationCommentModel.showFieldBean}"
                                :value="item.${field.customMap.relationCommentModel.tablePrimary}">
                        </el-option>
                    </el-select>
                </el-form-item>
                            <#else>
                <el-form-item label="${field.comment?split("#")[0]}" prop="${field.propertyName}">
                    <el-input v-model.trim="searchForm.${field.propertyName}"
                              placeholder="${field.comment?split("#")[0]}">
                    </el-input>
                </el-form-item>
                            </#if>
                        </#if>
                    </#if>
                    <#if field.propertyName == "createTime">
                <el-form-item label="${field.comment?split("#")[0]}" prop="createTime">
                    <el-date-picker
                            v-model.trim="searchDate"
                            unlink-panels
                            type="datetimerange"
                            range-separator="至"
                            @change="dateChange()"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                    </#if>
                </#list>
                <el-form-item>
                    <el-button type="primary" @click="onSearch">查 询</el-button>
                    <el-button @click="resetSearchForm">重 置</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <#-- 添加和删除按钮区域 -->
        <!-- 添加和删除按钮区域 -->
        <el-row class="lz-padding-bottom-15">
            <el-button type="primary" @click="addHandleClick" v-auth="['/${entity?uncap_first}/saveOrUpdate']">添加
            </el-button>
            <el-button type="primary" @click="batchDelete" v-auth="['/${entity?uncap_first}/delete']">批量删除
            </el-button>
            <el-button type="primary" @click="exportExcel" v-auth="['/${entity?uncap_first}/export']">
                导出数据
            </el-button>
        </el-row>
        <#-- 数据列表表单区域 -->
        <!-- 数据列表表单区域 -->
        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
                    type="index"
                    label="序号"
                    width="60"
                    align="center"
                    :index="indexMethod"
            ></el-table-column>
            <#list table.fields as field >
                <#if !field.comment?contains("!") && !field.comment?contains("！") && field.propertyName != "id">
                    <#if field.type == 'datetime'>
            <el-table-column
                    prop="${field.propertyName}"
                    label="<#if field.propertyName == 'id'>ID<#else>${field.comment?split("#")[0]}</#if>"
                    :formatter="carTimeFilter"
                    align="center">
            </el-table-column>
                    <#else>
                    <#--删除标识不展示-->
                        <#if field.name != 'delete_flag' && !field.customMap.statusFlag && !field.customMap.relationFlag>
            <el-table-column
                    prop="${field.propertyName}"
                    label="<#if field.propertyName == 'id' >ID<#else>${field.comment?split("#")[0]}</#if>"
                    align="center">
            </el-table-column>
                        </#if>
                        <#if field.customMap.statusFlag>
            <el-table-column
                    prop="${field.propertyName}"
                    label="<#if field.propertyName == 'id'>ID<#else>${field.comment?split("#")[0]}</#if>"
                    :formatter="${field.propertyName}Filter"
                    align="center">
            </el-table-column>
                        </#if>
                        <#if field.customMap.relationFlag>
                            <el-table-column
                                    prop="${field.customMap.relationCommentModel.aliasVar}"
                                    label="${field.customMap.relationCommentModel.showInfo}"
                                    align="center"
                            ></el-table-column>
                        </#if>
                    </#if>
                </#if>
            </#list>

            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="editorHandleClick(scope.row)"
                               v-auth="['/${entity?uncap_first}/saveOrUpdate']" size="small">编辑
                    </el-button>
                    <el-button @click="deleteHandleClick(scope.row)" type="text"
                               v-auth="['/${entity?uncap_first}/delete']" size="small">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <#-- 列表分页操作区域 -->
        <!-- 列表分页操作区域 -->
        <pagination :total="totalCount" :current-page="currentPage" :page-size="pageSize"
                    @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></pagination>

        <#-- 编辑和添加页面定义 -->
        <!-- 编辑和添加页面定义 -->
        <el-dialog :title="isEditor ? '编辑' : '添加'" :visible.sync="dialogAddFormVisible">
            <el-form :model="dialogForm" :rules="rules" ref="dialogForm">
                <el-input type="hidden" v-model="dialogForm.id" autocomplete="off"></el-input>
                <#list table.fields as field >
                    <#if (field.propertyName != "id" && field.propertyName != "createTime" && field.propertyName != "updateTime") && field.name != 'delete_flag' && !field.customMap.specialFieldFlag>
                        <#if field.type == 'datetime'>
                <el-form-item prop="${field.propertyName}"
                              label="${field.comment?split("#")[0]?replace("!","")?replace("！","")}"
                              :label-width="dialogFormLabelWidth">
                    <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                                    v-model="dialogForm.${field.propertyName}"
                                    autocomplete="off">
                    </el-date-picker>
                </el-form-item>
                        <#else>
                            <#if field.customMap.statusFlag>
                <el-form-item
                        label="${field.customMap.tableCommentModel.label?replace("!","")?replace("！","")}"
                        prop="${field.propertyName}" :label-width="dialogFormLabelWidth">
                    <el-select v-model="dialogForm.${field.propertyName}"
                               placeholder="${field.customMap.tableCommentModel.label?replace("!","")?replace("！","")}"
                               autocomplete="off">
                        <#list field.customMap.tableCommentModel.params?keys as key>
                            <el-option label="${field.customMap.tableCommentModel.params[key]}"
                                       :value="${key}">
                            </el-option>
                        </#list>
                    </el-select>
                </el-form-item>
                        <#elseif field.customMap.relationFlag>
                <el-form-item prop="${field.propertyName}" label="${field.customMap.relationCommentModel.showInfo}" :label-width="dialogFormLabelWidth">
                    <el-select v-model="dialogForm.${field.propertyName}" filterable placeholder="请选择" @focus="init${field.customMap.relationCommentModel.aliasVar?cap_first}">
                        <el-option
                                v-for="item in ${field.customMap.relationCommentModel.aliasVar}Options"
                                :key="item.${field.customMap.relationCommentModel.tablePrimary}"
                                :label="item.${field.customMap.relationCommentModel.showFieldBean}"
                                :value="item.${field.customMap.relationCommentModel.tablePrimary}">
                        </el-option>
                    </el-select>
                </el-form-item>
                        <#else>
                <el-form-item prop="${field.propertyName}"
                              label="${field.comment?split("#")[0]?replace("!","")?replace("！","")}"
                              :label-width="dialogFormLabelWidth">
                    <el-input v-model="dialogForm.${field.propertyName}" autocomplete="off"></el-input>
                </el-form-item>
                            </#if>
                        </#if>
                    </#if>
                </#list>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="resetDialogFormData('dialogForm')" v-if="!isEditor">重 置</el-button>
                <el-button @click="dialogAddFormVisible = false" v-if="isEditor">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import moment from "moment";
    import Pagination from '@/components/Pagination/Pagination'

    export default {
        components: {
            Pagination
        },
        data() {
            return {
                                <#list table.fields as field >
                <#if field.customMap.relationFlag>
                ${field.customMap.relationCommentModel.aliasVar}Options:[],
                </#if>
                </#list>
                searchDate: "",
                //数据分页
                loading: true,//区域加载
                currentPage: 1,//当前页码
                totalCount: 1,// 总条数，根据接口获取数据长度(注意：这里不能为空)
                pageSize: 10,//页面数据显示数量
                //数据列表表单
                tableData: [],//数据列表表单的数据域
                tableChecked: [],//批量删除时被选中行
                ids: [],//批量删除的id
                //数据更新
                updateUserId: 0,//编辑时要更新的用户id
                //搜索
                searchForm: {
                    <#--定义搜索框的数据域-->
                    <#list table.fields as field>
                    <#--这些字段不搜索-->
                        <#if (field.propertyName != "id" && field.propertyName != "createTime" && field.propertyName != "updateTime") >
                    <#--时间格式暂时不搜索-->
                            <#if field.type != 'datetime'>
                    <#--删除标识暂时不搜索-->
                                <#if field.name == 'delete_flag'>
                                <#else>
                                    ${field.propertyName}: "",
                                </#if>
                            </#if>
                        </#if>
                    </#list>
                },
                isEditor: false,//标志弹出框是编辑还是添加
                dialogAddFormVisible: false,//编辑表单弹出框是否显示
                dialogForm: {//弹出框的数据域
                    <#--这里显示表中所有的字段，默认值是空字符串-->
                    <#list table.fields as field >
                    <#--删除标识暂时不弹框-->
                    <#if field.name == 'delete_flag'>
                    <#else>
                    ${field.propertyName}: "",
                    </#if>
                    </#list>
                },
                dialogFormLabelWidth: '120px',//弹出表单的输入框的宽度
                rules: {//弹出表单的输入规则
                    <#list table.fields as field >
                    <#if field.customMap.relationFlag>
                    ${field.propertyName}: [
                        {
                            required: true,
                            message: "请选择${field.comment?split("#")[5]}",
                            trigger: "change",
                        }
                    ],
                    <#elseif field.customMap.statusFlag>
                    ${field.propertyName}: [
                        {
                            required: true,
                            message: "请选择${field.comment?split("#")[0]}",
                            trigger: "change",
                        }
                    ],
                    <#else >
                    ${field.propertyName}: [
                        {
                            required: true,
                            message: "请输入${field.comment?split("#")[0]}",
                            trigger: "blur",
                        }
                    ],
                    </#if>

                    </#list>
                },
                urls: {
                    saveOrUpdate: "/${entity?uncap_first}/saveOrUpdate",
                    search: "/${entity?uncap_first}/list",
                    delete: "/${entity?uncap_first}/delete",
                    find: "/${entity?uncap_first}/findById",
                    exportExcel: "/${entity?uncap_first}/export",
                    <#list table.fields as field >
                        <#if field.customMap.specialFieldFlag>
                    view: "/${entity?uncap_first}/view${field.customMap.specialFieldCommentModel.beanObjName}"
                    <#break>
                        </#if>
                    </#list>

                },
            };
        },
        created: function () {
            this.pageList();
                        <#list table.fields as field >
            <#if field.customMap.relationFlag>
            this.init${field.customMap.relationCommentModel.aliasVar?cap_first}();
            </#if>
            </#list>
        },
        methods: {
            <#list table.fields as field >
            <#if field.customMap.relationFlag>
            init${field.customMap.relationCommentModel.aliasVar?cap_first}: function(){
                let url = "/${entity?uncap_first}/find${field.customMap.relationCommentModel.aliasVar?cap_first}";
                this.axios({
                    method: "GET",
                    url: url,
                }).then((res) => {
                    let code = res.data.code;
                    if (code == 200) {
                        this.$data.${field.customMap.relationCommentModel.aliasVar}Options = res.data.data;
                    }
                }).catch((error) => {
                    console.log(error);
                });
            },
            </#if>
            </#list>
            indexMethod(index) {
                return (this.currentPage - 1) * this.pageSize + index + 1;
            },
            //加载列表数据
            pageList: function () {
                this.$data.loading = true;
                let url = this.$data.urls.search + "/" + this.currentPage + "/" + this.pageSize;
                this.axios({
                    method: "POST",
                    url: url,
                    data: this.$data.searchForm,
                }).then((res) => {
                    this.$data.loading = false;
                    let code = res.data.code;
                    if (code == 200) {
                        this.$data.tableData = res.data.data.records;
                        this.$data.totalCount = res.data.data.total;
                        this.$data.currentPage = res.data.data.current;
                    }
                }).catch((error) => {
                    console.log(error);
                });
            },
            onSearch: function () {
                this.pageList();
            },
            resetSearchForm: function () {
                //重置表单数据
                this.searchForm = this.$options.data().searchForm;
                this.searchDate = this.$options.data().searchDate;
                this.pageList();

            },
            //重置编辑弹出框表单的数据
            resetDialogFormData: function (formName) {
                if (this.$refs[formName] !== undefined) {
                    this.$refs[formName].resetFields();
                }
            },
            addHandleClick: function () {
                this.dialogForm = this.$options.data().dialogForm;
                this.$data.isEditor = false;
                this.$data.dialogAddFormVisible = true;
                this.resetDialogFormData('dialogForm');
            },
            saveOrUpdate: function () {
                this.$refs['dialogForm'].validate((valid) => {
                    if (valid && this.checkDialogForm()) {
                        this.axios({
                            method: 'POST',
                            url: this.$data.urls.saveOrUpdate,
                            data: this.dialogForm
                        }).then(res => {
                            let code = res.data.code
                            if (code == 200) {
                                this.pageList();
                                this.$data.dialogAddFormVisible = false
                            } else if (code == 20004) {
                                this.$message.error('请先修改数据在更新');
                            }
                        }).catch(error => {
                            console.log(error);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            editorHandleClick: function (row) {
                this.$data.loading = true;
                this.isEditor = true;
                let url = this.$data.urls.find + "/" + row.id;
                this.axios({
                    method: "GET",
                    url: url,
                    data: {},
                }).then((res) => {
                    this.$data.loading = false;
                    let code = res.data.code;
                    if (code == 200) {
                        this.dialogAddFormVisible = true;
                        this.resetDialogFormData('dialogForm');
                        this.$nextTick(() => {
                            this.$data.dialogForm = res.data.data;
                        })
                    }
                }).catch((error) => {
                    console.log(error)
                });
            },
            exportExcel: function () {
                let url = this.urls.exportExcel;
                this.axios({
                    method: "GET",
                    url: url,
                    data: {},
                })
                    .then((res) => {
                        let code = res.data.code;
                        if (code == 200) {
                            console.log(res.data.data);
                            window.location.href = process.env.VUE_APP_BASEURL + "/profile/download/" + res.data.data;
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            deleteHandleClick: function (row) {
                this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$data.ids.push(row.id);
                    this.delete();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //删除ids中对应的
            delete: function () {
                let data = this.$data.ids
                //获得url尾部,要删除的id部分
                let urlChild = '';
                data.forEach((e) => {
                    urlChild += 'ids=' + e + '&'
                });
                urlChild = urlChild.substring(0, urlChild.lastIndexOf('&'));

                let url = this.$data.urls.delete + '/?' + urlChild
                this.axios({
                    method: 'GET',
                    url: url,
                    data: {}
                }).then(res => {
                    let code = res.data.code;
                    this.$data.ids = [];//清空要删除的id数组
                    if (code == 200) {
                        this.pageList();
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            handleSelectionChange: function (val) {
                this.tableChecked = val;
            },
            batchDelete: function () {
                let that = this;
                let _rows = this.$data.tableChecked;
                if (_rows.length <= 0) {
                    this.$message.warning('请先选择需要删除的数据');
                    return;
                }
                that.$confirm('是否删除选中的所有用户?删除后无法恢复!', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    _rows.forEach(element => {
                        that.ids.push(element.id)
                    })
                    this.delete();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleCurrentChange: function (val) {
                this.$data.currentPage = val;
                this.pageList();
            },
            //改变每页显示数量，重新加载数据
            handleSizeChange: function (val) {
                this.$data.currentPage = 1;
                this.$data.pageSize = val;
                this.pageList();
            },
            checkDialogForm() {
                return true;
            },
            carTimeFilter: function (row, column, cellValue) {
                if (cellValue != null) {
                    return moment(cellValue).format("YYYY-MM-DD HH:mm:ss");
                }
            },
            <#list table.fields as field >
            <#if (!field.comment?contains("!") && !field.comment?contains("！")) && field.customMap.statusFlag>
            ${field.propertyName}Filter: function (row, column, cellValue) {
                <#list field.customMap.tableCommentModel.params?keys as key>
                if (cellValue == ${key}) {
                    return "${field.customMap.tableCommentModel.params[key]}";
                }
                </#list>
            },
            </#if>
            </#list>
            dateChange: function () {
                this.searchForm.createTimeBegin = this.searchDate[0];
                this.searchForm.createTimeEnd = this.searchDate[1];
                console.log(this.searchForm.createTimeBegin + " | " + this.searchForm.createTimeEnd)
            },
            <#list table.fields as field >
            <#if field.customMap.specialFieldFlag>
            viewHandleClick: function(id){
                this.vissync = true;
                let url = this.$data.urls.view + "/" + id
                this.axios({
                    method: "POST",
                    url: url,
                    data: {},
                }).then((res) => {
                    let code = res.data.code;
                    if (code == 200) {
                        console.log(res.data.data)
                    }
                }).catch((error) => {
                    console.log(error);
                });
            }
            <#break>
            </#if>
            </#list>

        },
    };
</script>

<style>
</style>